/*
 * @Author: wangjq4214
 * @Date: 2022-05-03 19:56:52
 * @LastEditTime: 2022-05-03 21:34:54
 * @LastEditors: wangjq4214
 */

import Footer from '@/components/footer';
import { settingsAtom } from '@/models/global';
import Banner from './components/banner';
import LoginFrom from './components/form';

const Login = () => {
  const [settings] = useAtom(settingsAtom);

  return (
    <div className="flex h-screen">
      <div className="fixed top-24px left-22px z-1 inline-flex items-center">
        <img
          alt="logo"
          src="//p3-armor.byteimg.com/tos-cn-i-49unhts6dw/dfdba5317c0c20ce20e64fac803d52bc.svg~tplv-49unhts6dw-image.image"
        />
        <div className="mx-4px text-$color-fill-1 text-20px">
          {settings.title}
        </div>
      </div>

      <Banner />

      <div className="relative flex flex-1 items-center justify-center pb-40px">
        <div>
          <LoginFrom />
        </div>

        <div className="absolute right-0 bottom-0 w-full">
          <Footer />
        </div>
      </div>
    </div>
  );
};

export default Login;
